<template>
    <view class="uni-container-mine">
        <view>
            <div class="uni-profile-info" v-if="!isVIP">
                <img src="https://cdn.yueyangshuyuan.com/bgg.png" alt="" class="profile-bg">
                <div class="profile-info_detail clearfix">
                    <div class="fl profile-info-content">
                        <img src="https://cdn.yueyangshuyuan.com/personImg.png" alt="" class="profile-headImg" v-if="!headImgUrl">
                        <img :src="headImgUrl" alt="" class="profile-headImg" v-if="headImgUrl">
                        <span class="profile-userName" v-if="userName">{{userName}}</span>
                        <span class="profile-userName" v-else  @tap='jumpLogin'>登录/注册</span>
                     </div>
                    <button class="profile-eidt fr" @tap="toEidt" v-if="hasLogin">编辑</button>
                </div>
                <div class="meberCard">
                    <img src="https://cdn.yueyangshuyuan.com/%E4%BC%9A%E5%91%98%E5%8D%A1.png" alt="" class="meberCard-bg">
                    <div class="meberCard-btn">
                        <span class="meberCard-doc" @tap="toOpenMenber">立即开通</span>
                        <img src="https://cdn.yueyangshuyuan.com/more2.png" alt="" class="meberCard-more">
                    </div>
                </div>
            </div>
            <div class="uni-profile-vip" v-if="isVIP">
                <img src="https://cdn.yueyangshuyuan.com/jiaruvip.png" alt="" class="profile-bg">
                <div class="profile-info_detail clearfix">
                    <img :src="headImgUrl" alt="" class="profile-headImg fl" v-if="headImgUrl">
                    <div class="profile-vip fl">
                        <span class="profile-userName" v-if="userName">{{userName}}</span><br/>
                        <img src="https://cdn.yueyangshuyuan.com/viplogo.png" alt="" class="profile-vipImg" v-if="headImgUrl">
                    </div>
                    <button class="profile-eidt fr" @tap="toEidt" v-if="hasLogin">编辑</button>
                </div>
            </div>
            <div class="myOrder">
                <h3 class="myOrder-title">我的订单</h3>
                <ul class="order-tab">
                    <li v-for="(item,index) in orderList" :key="index" @tap="toMyOrder(item)">
                        <img :src="item.iconURL" alt="">
                        <span>{{item.name}}</span>
                    </li>
                </ul>
            </div>
            <div class="myCollect" @tap="toMyCollect">
                <span>我的收藏</span>
                <img src="https://cdn.yueyangshuyuan.com/more.png" alt="">
            </div>
            <!-- <div class="myCollect" @tap="toMyPopularize">
                <span>我的推广</span>
                <img src="https://cdn.yueyangshuyuan.com/more.png" alt="">
            </div> -->
            <button class="login-out" @tap="LoginOut" v-if="hasLogin">退出登录</button>
		</view>
        <Tabbar :tabSelect=2></Tabbar>
    </view>
</template>
<script>
import { mapState,mapMutations } from 'vuex';
import Tabbar from '../../components/tabber.vue';

export default {
    computed: mapState(['headImgUrl','userName','hasLogin','isVIP']),
    components: {
        Tabbar
    },
    data(){
        return {
            orderList:[
                {
                    iconURL:'https://cdn.yueyangshuyuan.com/order.png',
                    name:'全部订单',
                    type:0,
                }, {
                    iconURL:'https://cdn.yueyangshuyuan.com/waitPay.png',
                    name:'待付款',
                    type:1,
                },{
                    iconURL:'https://cdn.yueyangshuyuan.com/waitgo.png',
                    name:'未出行',
                    type:2,
                },{
                    iconURL:'https://cdn.yueyangshuyuan.com/ping.png',
                    name:'待点评',
                    type:3,
                }
            ],
        }
    },
    mounted(){
    },
    methods: {
        ...mapMutations(['loginStateInfo','logout']),
        jumpLogin(){
            uni.navigateTo({
                url: '/pages/login/login'
            });
        },
        getUserDetail(){
            this.$api.getUser({}).then(json=>{
                if(json.code !== -1){
                    this.loginStateInfo(json.data);
                }else{
                    this.logout();
                }
            });
        },
        toEidt(){//去编辑
            uni.navigateTo({
                url: '/pages/userData/userData'
            });
        },
        toOpenMenber(){//开通会员
            uni.navigateTo({
                url: '/pages/membersVip/membersVip'
            });
        },
        toMyCollect(){//我的收藏夹
            if(!this.hasLogin){
                this.jumpLogin();
            }else{
                uni.navigateTo({
                    url: '/pages/collection/collection'
                });
            }
        },
        toMyPopularize(){
            if(!this.hasLogin){
                this.jumpLogin();
            }else{
                uni.navigateTo({
                    url: '/pages/popularize/popularize'
                });
            }
        },
        toMyOrder(item){//我的订单
            if(!this.hasLogin){
                this.jumpLogin();
            }else{
                uni.navigateTo({
                    url: '/pages/myOrderLIst/myOrderLIst?type='+item.type
                });
            }
        },
        LoginOut(){//退出登录
            this.$api.LoginOut({}).then(json=>{
                uni.setStorageSync('token','');
                this.logout();
            })
        },






        getUserInfo(e){
            wx.getSetting({
                success: (res) => {
                    if(res.authSetting["scope.userInfo"]){//已授权
                        uni.getUserInfo({
                            success: (res)=> {
                                if(res.errMsg == "getUserInfo:ok"){
                                    this.userInfo = res.userInfo;
                                    this.onFirstUserInfo(res);
                                    uni.navigateTo({
                                        url: '/pages/login/login'
                                    });
                                }else{
                                    console.log("wx.getUserInfo fail");
                                }
                            },
                            fail:(res)=>{
                                console.log("wx.getUserInfo fail");
                            }
                        });
                    }else{
                        
                    }
                }
            })
        },
        
        /**
         * 第一次获取用户信息时调用
         */
        onFirstUserInfo(data) {
            let token = uni.getStorageSync('token')
            this.$api.bindWxUserInfo({
                ...data
            }).then(json=>{
                console.log(json,"绑定微信号")
            })
        }, 
    },
    onShow() {
        this.getUserDetail();
    }
}
</script>
<style lang='scss'>
    .fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
	}
    .uni-container-mine{
        width: 100%;
        .uni-profile-info{
            height: 312upx;
            width:100%;
            position: relative;
            .profile-bg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index:-1;
            }
            .profile-info_detail{
                height: 190upx;
                padding: 0 25upx;
                padding-top: 50upx;
                .profile-info-content{
                    height: 140upx;
                    .profile-headImg{
                        width: 140upx;
                        height: 140upx;
                        border-radius: 50%;
                        box-sizing: border-box;
                        border: 4upx solid #FFFFFF;
                        background: #fff;
                    }
                    .profile-userName{
                        font-size: 40upx;
                        color: #262626;
                        font-weight: bold;
                        line-height: 140upx;
                        position: relative;
                        top: -54upx;
                        left: 26upx;
                    }
                }
                .profile-eidt{
                    background: #FFFFFF;
                    border-radius: 28upx;
                    font-size: 28upx;
                    color: #FE720C;
                    text-align: center;
                    line-height: 56upx;
                    position: relative;
                    top: 42upx;
                    &:after{
                        display: none!important;
                    }
                }
            }
            .meberCard{
                padding: 0 25upx;
                position: relative;
                height: 100upx;
                top: -27upx;
                .meberCard-bg{
                    position: absolute;
                    top:0;
                    left:25upx;
                    width: 700upx;
                    height: 100%;;
                }
                .meberCard-btn{
                    position: absolute;
                    right: 50upx;
                    top: 50%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    .meberCard-doc{
                        font-size: 28upx;
                        color: #fff;
                        padding-right: 14upx;
                    }
                    .meberCard-more{
                        width: 13upx;
                        height: 22upx;
                    }
                }
            }
        }
        .uni-profile-vip{
            height: 250upx;
            width:100%;
            position: relative;
            .profile-bg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index:-1;
            }
             .profile-info_detail{
                height: 190upx;
                padding: 0 25upx;
                padding-top: 50upx;
                .profile-headImg{
                    width: 140upx;
                    height: 140upx;
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: 4upx solid #FFFFFF;
                    background: #fff;
                }
                .profile-vip{
                    display: flex;
                    flex-direction: column;
                    margin-left: 26upx;
                    position: relative;
                    top: 16upx;
                    .profile-userName{
                        font-size: 40upx;
                        color: #262626;
                        font-weight: bold;
                    }
                    .profile-vipImg{
                        width: 180upx;
                        height: 52upx;
                        margin-top: 5upx;
                    }
                }
                .profile-eidt{
                    background: #FFFFFF;
                    border-radius: 28upx;
                    font-size: 28upx;
                    color: #FE720C;
                    text-align: center;
                    line-height: 56upx;
                    position: relative;
                    top: 42upx;
                    &:after{
                        display: none!important;
                    }
                }
            }
        }
        .myOrder{
            margin-top: 30upx;
            background: #fff;
            border-bottom: 1px solid #EFF3F5;
            .myOrder-title{
                font-size: 36upx;
                color: #262626;
                font-weight: bold;
                margin-bottom: 26upx;
                padding: 0 25upx;
            }
            .order-tab{
                padding: 0 25upx;
                display: flex;
                justify-content: space-around;
                margin-bottom: 38upx;
                >li{
                    display: flex;
                    flex-direction: column;
                    img{
                        margin: 0 auto;
                        margin-bottom: 22upx;
                    }
                    span{
                        font-size: 28upx;
                        color: #262626;
                    }
                    &:nth-of-type(1){
                        img{
                            width: 56upx;
                            height: 60upx;
                        }
                    }
                     &:nth-of-type(2){
                        img{
                            width: 66upx;
                            height: 62upx;
                        }
                    }
                     &:nth-of-type(3){
                        img{
                            width: 60upx;
                            height: 60upx;
                        }
                    }
                    &:nth-of-type(4){
                        img{
                            width: 60upx;
                            height: 58upx;
                        }
                    }
                }
            }
        }
        .myCollect{
            height: 112upx;
            padding: 0 25upx;
            border-bottom: 1px solid #EFF3F5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >span{
                font-size: 28upx;
                color: #262626;
            }
            >img{
                width: 18upx;
                height: 30upx;
            }
        }
        .login-out{
            width: 710upx;
            margin: 0 auto;
            margin-top: 40upx;
            background: #EFF3F5;
            border-radius: 8upx;
            font-size: 32upx;
            color: #262626;
            line-height: 90upx;
            height: 90upx;
            text-align: center;
            &:after{
                display: none!important;
            }
        }
     }
    .headImg{
        width: 50upx;
        height: 50upx;
        border-radius: 50%;
        background:#666;
    }
</style>


